<template>
  <div class="hyzxpj_box">
    <div class="hyzxpj_box_tab">
      <div class="zxph_tab" v-if="selectshow == 0 || selectshow == 2">
        {{ this.$route.meta.title }}
      </div>
      <div class="zxph_tab" v-if="selectshow == 1">
        {{ contentlist.method[num].name }}
      </div>
    </div>

    <div class="zntz_nr_box">
      <div class="select_allbox" v-if="selectshow == 0">
        <div class="lable_box">选择测评方法</div>
        <div class="value_box">
          <el-select v-model="value" multiple placeholder="请选择">
            <el-option
              v-for="item in flist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div class="bgzc_button">
          <el-button type="primary" @click="selectitem()">确定</el-button>
        </div>
      </div>

      <div class="content_allbox" v-if="selectshow == 1">
        <div class="title_box">
          <div class="title_item" v-for="(item, index) in options" :key="index">
            {{ item.label }}
          </div>
        </div>
        <!-- ======================== -->
        <!-- <div v-if=""> -->
        <div v-for="(ele, index) in method" :key="index">
          <div v-if="ele.child == 0 && ele.content" style="background: #ddd">
            <div class="content_item_box">
              <div class="content_item">
                <span v-if="ele.name">{{ ele.name }}</span>
              </div>

              <div class="content_item">
                <span v-if="ele.content.rating_points">
                  {{ ele.content.rating_points }}</span
                >
              </div>

              <div class="content_item">
                <span v-if="ele.content.first_illustrate">{{
                  ele.content.first_illustrate
                }}</span>
              </div>

              <!-- <div class="content_item">
                  <span>{{ ele.content.second_illustrate }}</span>
                </div> -->

              <div class="content_item">
                <span v-if="ele.content.three_illustrate">{{
                  ele.content.three_illustrate
                }}</span>
              </div>

              <!-- <div class="content_item">
                  <span>{{ ele.content.four_illustrate }}</span>
                </div> -->

              <div class="content_item">
                <span v-if="ele.content.five_illustrate">{{
                  ele.content.five_illustrate
                }}</span>
              </div>

              <div class="content_item wudeng">
                <span v-if="ele.content.five_down_illustrate">{{
                  ele.content.five_down_illustrate
                }}</span>
              </div>

              <div class="content_item last_time">
                <el-select
                  v-model="ele.value"
                  placeholder="请选择"
                  size="small"
                  :disabled="ele.content ? false : true"
                  @change="Selectchange(ele)"
                >
                  <el-option
                    v-for="elementss in list"
                    :key="elementss.id"
                    :label="elementss.name"
                    :value="elementss.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="zedie" v-else-if="ele.child == 1">
            <!-- <el-collapse v-model="activeNames"> -->
            <el-collapse>
              <el-collapse-item :title="ele.name" :name="index.toString()">
                <div
                  class="content_item_box"
                  v-for="(element, a) in ele.childlist"
                  :key="a"
                >
                  <div class="content_item">
                    <span v-if="element.name">{{ element.name }}</span>
                  </div>

                  <div class="content_item">
                    <span
                      v-if="element.content && element.content.rating_points"
                    >
                      {{ element.content.rating_points }}</span
                    >
                  </div>

                  <div class="content_item">
                    <span
                      v-if="element.content && element.content.first_illustrate"
                      >{{ element.content.first_illustrate }}</span
                    >
                  </div>

                  <!-- <div class="content_item" 1>
                      <span>{{ element.content.second_illustrate }}</span>
                    </div> -->

                  <div class="content_item">
                    <span
                      v-if="element.content && element.content.three_illustrate"
                      >{{ element.content.three_illustrate }}</span
                    >
                  </div>

                  <!-- <div class="content_item" 1>
                      <span>{{ element.content.four_illustrate }}</span>
                    </div> -->

                  <div class="content_item">
                    <span
                      v-if="element.content && element.content.five_illustrate"
                      >{{ element.content.five_illustrate }}</span
                    >
                  </div>

                  <div class="content_item wudeng">
                    <span
                      v-if="
                        element.content && element.content.five_down_illustrate
                      "
                      >{{ element.content.five_down_illustrate }}</span
                    >
                  </div>

                  <div class="content_item last_time">
                    <el-select
                      v-model="element.value"
                      placeholder="请选择"
                      size="small"
                      :disabled="element.content ? false : true"
                      @change="Selectchange(element)"
                    >
                      <el-option
                        v-for="elements in list"
                        :key="elements.id"
                        :label="elements.name"
                        :value="elements.id"
                      >
                      </el-option>
                    </el-select>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div class="content_item_box ewai" style="background: #ddd" v-else>
            <div class="content_item_box">
              <div class="content_item">
                <span v-if="ele.name">{{ ele.name }}</span>
              </div>

              <div class="content_item">
                <span v-if="ele.content && ele.content.rating_points">
                  {{ ele.content.rating_points }}</span
                >
              </div>

              <div class="content_item">
                <span v-if="ele.content && ele.content.first_illustrate">{{
                  ele.content.first_illustrate
                }}</span>
              </div>

              <div class="content_item">
                <span v-if="ele.content && ele.content.three_illustrate">{{
                  ele.content.three_illustrate
                }}</span>
              </div>

              <div class="content_item">
                <span v-if="ele.content && ele.content.five_illustrate">{{
                  ele.content.five_illustrate
                }}</span>
              </div>

              <div class="content_item wudeng">
                <span v-if="ele.content && ele.content.five_down_illustrate">{{
                  ele.content.five_down_illustrate
                }}</span>
              </div>

              <div class="content_item last_time">
                <el-select
                  v-model="ele.value"
                  placeholder="请选择"
                  size="small"
                  :disabled="ele.content ? false : true"
                  @change="Selectchange(ele)"
                >
                  <el-option
                    v-for="element in list"
                    :key="element.id"
                    :label="element.name"
                    :value="element.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
        <!-- </div> -->
        <!-- ================================= -->
        <div style="display: flex; width: 70%; margin: auto">
          <div
            class="button"
            @click="pre()"
            style="background: rgba(252, 162, 4, 1)"
            v-if="this.num > 0"
          >
            上一步
          </div>
          <div class="button" @click="next()" v-if="!this.showtj">下一步</div>
          <div class="button" @click="Submit()" v-if="this.showtj">提交</div>
        </div>
      </div>

      <div v-if="selectshow == 2">
        <div class="bgjg_box">您的报告自测等级为：</div>
        <div class="bgjg_title">{{ enddata }} ！</div>
        <div class="bgjg_ts">
          以上结果不包含整体修正、真实性核查等内容，不作为报告
          评审结果如需帮助，请与省协会秘书处技术协调与信息管理部联系。
        </div>
      </div>
    </div>
  </div>
</template>
        <script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      showtj: false, //是否显示提交按钮
      // activeNames: ["1"],
      options: [
        {
          label: "评等项目",
        },
        {
          label: "要点",
        },
        {
          label: "一等标准说明",
        },
        // {
        //   label: "二等标准说明",
        // },
        {
          label: "三等标准说明",
        },
        // {
        //   label: "四等标准说明",
        // },
        {
          label: "五等标准说明",
        },
        {
          label: "五等以下标准说明",
        },
        {
          label: "等级选择",
        },
      ], //表头
      flist: [], //方法列表
      list: [],
      value: "", //选择的方法(数组)

      num: 0,
      method: [],
      arr: [],
    };
  },
  computed: {
    ...mapState({
      contentlist: (state) => state.contentlist,
      selectshow: (state) => state.selectshow,
      enddata: (state) => state.enddata,
    }),
  },
  mounted() {
    this.getflist();
    // console.log(this.selectshow,this.enddata);
    this.info();
    this.getweight();
    this.isgo()
  },
  methods: {
    ...mapMutations(["bgcontentlist", "setselectshow", "setenddata"]),
    /**
     * 是否进入状态
     */
     isgo() {
      let that = this;
      let data = {type:'3'};
      that.$http.post("report/report_isopen", data).then((res) => {
        if (res.data.switch == 0) {
          console.log(res)
          that.$self
            .ts(res.data, 2)
            .then(() => {
              this.$router.push({
                path: "/zjzhxx",
              });
            })
            .catch(() => {
              this.$router.push({
                path: "/zjzhxx",
              });
            });
        } else {

        }
      });
    },
    //获取等级
    getweight() {
      let that = this;
      let data = {
        type: 3,
      };
      that.$http.post("report/weight_list", data).then((res) => {
        if (res.code === 1) {
          that.list = res.data;
        } else {
          that.list = [];
        }
      });
    },
    //选择等级
    Selectchange(e) {
      // console.log(e);
      let that = this;

      // console.log(arr)
      that.contentlist.method[that.num].project.forEach((item, index) => {
        // console.log(item)
        if (item.child == 0) {
          if (item.content.id == e.content.id) {
            item.value = e.value;
          } else {
            item.value = item.value;
          }
        }
        if (item.child == 1) {
          item.childlist.forEach((ele, i) => {
            if (ele.content.id == e.content.id) {
              // console.log(ele,'======')
              ele.value = e.value;
            } else {
              ele.value = ele.value;
            }
          });
        }
      });
      that.arr = JSON.parse(
        JSON.stringify(that.contentlist.method[that.num].project)
      );
      that.method = that.arr;
      // console.log(that.method);
    },
    /**
     * 获取方法
     */
    getflist() {
      let that = this;
      let data = {
        type: 3,
      };
      that.$http.post("report/method_list", data).then((res) => {
        if (res.code === 1) {
          let arr = [];
          // console.log(res.data)
          res.data.forEach((item, index) => {
            let obj = {};
            obj["id"] = item.id;
            if (item.id == 4) {
              obj["name"] = "剩余法一(待开发)";
            } else if (item.id == 5) {
              obj["name"] = "剩余法二（已建成）";
            } else {
              obj["name"] = item.name;
            }
            arr.push(obj);
          });
          // console.log(arr)
          that.flist = arr;
        } else {
          that.flist = [];
        }
      });
    },
    /**
     * 提交方法,获取项目信息
     */
    selectitem() {
      let that = this;

      // that.value = [3, 4, 5, 6, 7, 8];
      // console.log(that.value);
      let data = {
        ids: that.value.join(","),
        type: 3,
      };
      that.$http.post("report/choise_method", data).then((res) => {
        that.$self.ts(res).then(() => {
          // that.selectshow = 1;
          that.setselectshow(1);
          that.bgcontentlist(res.data);
          // that.contentlist = res.data;
          // that.method = JSON.parse(JSON.stringify(this.contentlist.method[2]));

          // that.contentlist.method[this.num].project.forEach((item, index) => {
          //   // console.log(item)
          //   if (item.child == 0) {
          //     item["value"] = "";
          //   }
          //   if (item.child == 1) {
          //     item.childlist.forEach((ele, i) => {
          //       ele["value"] = "";
          //     });
          //   }
          // });

          this.contentlist.method.forEach((item, index) => {
            item.project.forEach((ele, i) => {
              if (ele.child == 0) {
                ele["value"] = "";
              }
              if (ele.child == 1) {
                ele.childlist.forEach((element, y) => {
                  element["value"] = "";
                });
              }
            });
          });
          that.method = that.contentlist.method[this.num].project;

          // console.log(that.method);
        });
      });
    },
    /**
     * 切出返回不显示bug
     */
    info() {
      let that = this;
      // console.log(JSON.stringify(that.contentlist))
      if (!that.$self.pdobj(that.contentlist)) {
        that.method = that.contentlist.method[this.num].project;
      }
    },
    /**
     * 上一步
     */
    pre() {
      if (this.num == 0) {
        return;
      }
      this.num--;
      if (this.num < this.contentlist.method.length - 1) {
        this.showtj = false;
      }
      // console.log(this.num);

      this.arr = JSON.parse(
        JSON.stringify(this.contentlist.method[this.num].project)
      );
      this.method = this.arr;
    },
    /**
     * 下一步
     */
    next() {
      for (
        let i = 0;
        i < this.contentlist.method[this.num].project.length;
        i++
      ) {
        if (this.contentlist.method[this.num].project[i].child == 1) {
          // console.log(this.contentlist.method[this.num].project[i]);
          for (
            let y = 0;
            y < this.contentlist.method[this.num].project[i].childlist.length;
            y++
          ) {
            if (
              this.contentlist.method[this.num].project[i].childlist[y].value ==
              ""
            ) {
              // console.log(this.contentlist.method[this.num].project[i].childlist[y])

              let res = {
                code: 0,
                msg:
                  "请选择：" +
                  this.contentlist.method[this.num].name +
                  "，" +
                  this.contentlist.method[this.num].project[i].name +
                  "，" +
                  this.contentlist.method[this.num].project[i].childlist[y]
                    .name,
              };
              this.$self.ts(res);
              return;
            }
          }
        }
        if (this.contentlist.method[this.num].project[i].child == 0) {
          if (this.contentlist.method[this.num].project[i].value == "") {
            let res = {
              code: 0,
              msg:
                "请选择：" +
                this.contentlist.method[this.num].name +
                "," +
                this.contentlist.method[this.num].project[i].name,
            };
            this.$self.ts(res);
            return;
          }
        }
      }

      if (this.contentlist.method.length - 1 == this.num) {
        return;
      }
      this.num++;

      if (this.num == this.contentlist.method.length - 1) {
        this.showtj = true;
      }
      // console.log(this.num);

      // this.contentlist.method[this.num].project.forEach((item, index) => {
      //   // console.log(item)
      //   if (item.child == 0) {
      //     item["value"] = "";
      //   }
      //   if (item.child == 1) {
      //     item.childlist.forEach((ele, i) => {
      //       ele["value"] = "";
      //     });
      //   }
      // });
      this.arr = JSON.parse(
        JSON.stringify(this.contentlist.method[this.num].project)
      );
      this.method = this.arr;
    },
    /**
     * 提交
     */
    Submit() {
      for (
        let i = 0;
        i < this.contentlist.method[this.num].project.length;
        i++
      ) {
        if (this.contentlist.method[this.num].project[i].child == 1) {
          // console.log(this.contentlist.method[this.num].project[i]);
          for (
            let y = 0;
            y < this.contentlist.method[this.num].project[i].childlist.length;
            y++
          ) {
            if (
              this.contentlist.method[this.num].project[i].childlist[y].value ==
              ""
            ) {
              // console.log(this.contentlist.method[this.num].project[i].childlist[y])

              let res = {
                code: 0,
                msg:
                  "请选择：" +
                  this.contentlist.method[this.num].name +
                  "，" +
                  this.contentlist.method[this.num].project[i].name +
                  "，" +
                  this.contentlist.method[this.num].project[i].childlist[y]
                    .name,
              };
              this.$self.ts(res);
              return;
            }
          }
        }
        if (this.contentlist.method[this.num].project[i].child == 0) {
          if (this.contentlist.method[this.num].project[i].value == "") {
            let res = {
              code: 0,
              msg:
                "请选择：" +
                this.contentlist.method[this.num].name +
                "," +
                this.contentlist.method[this.num].project[i].name,
            };
            this.$self.ts(res);
            return;
          }
        }
      }

      // console.log(JSON.stringify(this.contentlist));
      let arr = [];
      this.contentlist.method.forEach((item, index) => {
        item.project.forEach((ele, i) => {
          if (ele.child == 0) {
            let obj = {
              id: ele.content.id,
              weight_id: ele.value,
            };
            arr.push(obj);
          }
          if (ele.child == 1) {
            ele.childlist.forEach((element, y) => {
              let objq = {
                id: element.content.id,
                weight_id: element.value,
              };
              arr.push(objq);
            });
          }
        });
      });
      // console.log(arr)
      let data = {
        report_id: this.contentlist.report_id,
        ask: arr,
        type: 3,
      };
      this.$http.post("report/report_save", data).then((res) => {
        if (res.code == 1) {
          console.log(res);
          this.setenddata(res.data.result);
          this.setselectshow(2);
          let obj = {};
          this.bgcontentlist(obj);
        }
      });
    },
    //  ==
  },
};
</script>
<style scoped>
.hyzxpj_box {
  background: #ffffff;
  border-radius: 0.125rem;
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.15);
  margin: 0.125rem 0.04rem 0 0.5rem;
}
::v-deep.el-select .el-select__tags > span {
  display: flex;
}
.zntz_nr_box {
  padding: 0.25rem 0 0.45rem;
  margin: 0.1rem;
}
.title_box {
  display: flex;
  /* justify-content: space-between; */
  width: 100%;
  margin: auto;
}
.title_item {
  font-size: 0.2rem;
  font-weight: bold;
  color: #ffffff;
  background: #1954a4;
  width: 2.105rem;
  border: 1px solid #ffffff;
  padding: 0.1437rem 0 0.1437rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title_item:last-child {
  width: 1.61rem;
}
.title_item:nth-child() {
  width: 1.9875rem;
}

.hyzxpj_box_tab {
  border-bottom: solid 0.0375rem #1954a4;
  display: flex;
  align-items: center;
  height: 0.75rem;
  padding-left: 0.25rem;
  box-sizing: border-box;
}

.zxph_tab {
  border-left: solid 0.075rem #1954a4;
  font-size: 0.25rem;
  font-weight: 400;
  color: #1954a4;
  padding-left: 0.2125rem;
  box-sizing: border-box;
}

.select_allbox {
  display: flex;
  align-items: center;
}
.lable_box {
  width: 2.0875rem;
  height: 0.6375rem;
  background: #1954a4;
  border: 1px solid #f2f2f2;
  font-size: 0.2rem;

  font-weight: 400;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.value_box {
  width: 12.425rem;
  height: 0.6375rem;
}
.content_allbox {
  margin-top: 0.2375rem;
  width: 100%;
}

.content_item_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: auto;
}
.content_item {
  width: 1.9875rem;
  padding: 0.15rem 0.2rem;
  border: 1px solid #f2f2f2;
  background: #ffffff;
  font-size: 0.175rem;
  font-weight: 400;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content_item_box .last_time {
  /* width: 1.125rem; */
  width: 1.9rem;
  padding: 0.3625rem 0;
}
.content_item_box ::v-deep.el-select {
  width: 100%;
}
.content_item_box ::v-deep.el-input {
  width: 100%;
}
.content_item_box ::v-deep.el-input__inner {
  width: 100% !important;
}
.wudeng {
  width: 1.9875rem;
}
.button {
  width: 3.25rem;
  height: 0.5rem;
  background: #1954a4;
  border-radius: 0.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  margin: 0.575rem auto 0rem;
}
.button:hover {
  background: #1f5fb8;
}
.ewai {
  margin-top: 0.0563rem;
}
.ewai .content_item {
  background: #f9f9f9;
}
.bgjg_box {
  font-size: 0.275rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  line-height: 0.375rem;
}
.bgjg_title {
  font-size: 0.6rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1954a4;
  line-height: 0.375rem;
  text-align: center;
  margin-top: 0.9125rem;
}
.bgjg_ts {
  font-size: 0.25rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  line-height: 0.45rem;
  text-align: center;
  margin-top: 0.9125rem;
  padding: 0 2.7125rem;
}
</style>
    <style>
.value_box .el-select {
  width: 100%;
  height: 100%;
}
.value_box .el-input {
  height: 100%;
}
.value_box .el-select .el-input__inner {
  border-radius: 0% !important;
  height: 100%;
}
.value_box .el-select__tags .el-tag {
  height: 0.4625rem;
}
.content_item:last-child .el-input__inner {
  border: none;
  width: 0.99rem;
  padding-left: 0.0987rem !important;
}
.zedie .el-collapse-item__header {
  height: 0.7625rem;
  background: #f2f2f2;
  border: 1px solid #f2f2f2;
  font-size: 0.2rem;
  font-weight: 400;
  color: #000000;
  padding-left: 0.625rem;
  margin-top: 0.04rem;
}
.zedie .el-collapse-item__wrap {
  border-bottom: none;
}
.zedie .el-collapse-item__content {
  padding-bottom: 0.075rem;
}
.zedie .el-collapse-item__content:last-child {
  padding-bottom: 0;
}
.ewai .content_item .el-input__inner {
  background: #f9f9f9;
}
.bgzc_button .el-button {
  height: 0.61rem;
  width: 1.38rem;
  margin-left: 0.1625rem;
  font-size: 0.2125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>